<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';

const valuepsw: Ref<string> = ref('')

const usertel = localStorage.getItem('usertel')
//加载这个页面就发送验证码
const time: Ref<number> = ref(60)
const codetext: Ref<string> = ref('60秒后重新获取')
let isSend = false//记录有没有正在发送验证码
import { sendCode } from '@/api/login'
import { useRouter } from 'vue-router';
import { showToast } from 'vant';//导入轻提示
const router = useRouter()
onMounted(() => {
    sendcodeFn()
    sendCode({}).then(res => {
        console.log(9, res.data.code);
    })
})
function sendcodeFn() {
    const timer = setInterval(() => {
        isSend = false
        time.value--
        codetext.value = time.value + 's后重新获取'
        if (time.value == 0) {
            time.value = 60
            codetext.value = '重新获取验证码'
            clearInterval(timer)
        }
    }, 1000)

}
import { loginFn } from '@/api/login';
import { useUserStore } from '@/stores/user'
const user = useUserStore()
function submit() {
    sendCode({}).then(res => {
        console.log(99, res);
        console.log(3, valuepsw.value);
        if (res.code == 200) {//成功发送验证码
            console.log(999999999, res.mesasge);
            if (valuepsw.value == res.data.code) {//判断验证码是否正确
                //调用登录接口
                loginFn({}).then(res => {
                    console.log(3, res.data.loginApi.token);
                    showToast(res.mesasge + '——3s后进入主页！');
                    user.changeUserState({
                        token: res.data.loginApi.token,
                        userid: res.data.loginApi.userid,
                        isLogin: true,
                        userpsw: res.data.loginApi.userpsw,
                        usertel,
                    })

                })

                setTimeout(() => {
                    router.push('/home')
                }, 3000)

            } else {
                console.log('error');

                showToast('验证码错误！');
            }
        }

    })

}
function onclickFn() {
    history.back()
}
const showKeyboard = ref(true);
const onInput = (value: any) => showToast(value);
const onDelete = () => showToast('删除');
</script>
<template>
    <div class="content">
        <div class="header">
            <van-nav-bar left-text="返回" left-arrow @click-left="onclickFn" />
        </div>
        <div class="nr">
            <p class="login-appname">输入验证码</p>
            <span class="start">验证码已发送至
                <br>
                {{ usertel ? usertel : '游客账户' }}</span>

            <p class="warning">{{ codetext }}</p>
            <van-button style="width: 60vw;margin: 20px auto;" type="primary" @click="submit">提交</van-button>
            <!-- 验证码输入框 -->
            <van-password-input :value="valuepsw" :mask="false" length="4" gutter="4px" :focused="showKeyboard"
                @focus="showKeyboard = true" />
            <!-- 数字键盘 -->
            <van-number-keyboard v-model="valuepsw" :show="showKeyboard" @blur="showKeyboard = false" />

        </div>

    </div>
</template>
<style lang="scss" scoped>
.content {
    background-color: #F6F6F6;
    height: 100%;
}

.nr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 14vw;

    .login-appname {
        font-size: 0.2rem;
    }

    .start {
        margin-top: 2vw;
        margin-bottom: 14vw;
        text-align: center;
    }

    .warning {
        font-size: 0.12rem;
        color: #C1C4C8;
    }


}

.van-password-input {
    width: 80vw;
    display: flex;
    justify-content: space-evenly;
}

.van-password-input .van-password-input__item {
    background-color: red;
    width: 14vw;
    height: 14vw;

}
</style>